<template>
  <el-container>
    <!-- 导航1 -->
    <el-header class="header">
      <el-row>
        <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" class="header_navbar">
          <el-col :span="8">
            <!-- 导航条logo -->
            <el-menu-item index="1" class="logo_box">
              <img src="../../assets/librarian/image/lib_logo.png" class="logo" />
            </el-menu-item>
          </el-col>
          <el-col :span="8">
            <!-- 导航条搜索框 -->
            <el-menu-item index="2">
              <el-input placeholder="Search here" clearable>
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-menu-item>
          </el-col>
          <!-- 导航条退出按钮 -->
          <el-col :span="2">
            <el-menu-item index="3" class="logout_box">
              <el-button type="info" @click="logout">Logout</el-button>
            </el-menu-item>
          </el-col>
          <el-col :span="2">
            <el-menu-item index="4" class="logout_box">
              <el-button type="info" @click="backToIndex">Back</el-button>
            </el-menu-item>
          </el-col>
        </el-menu>
      </el-row>
    </el-header>
    <!-- banner -->
    <el-row class="bannner">
      <el-row class="banner_box">
        <!-- 公告轮播图 -->
        <el-col :span="8" style="background-color: #545c64;height: 220px; margin-top: 20px;">
          <div class="block">
            <span class="demonstration">公告轮播图</span>
            <el-carousel height="150px">
              <el-carousel-item v-for="item in 3" :key="item">
                <h3 class="small">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <!-- 8个盒子 -->
        <el-col :span="16">
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/1.jpg" />
          </el-col>
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/2.jpg" />
          </el-col>
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/3.jpg" />
          </el-col>
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/4.jpg" />
          </el-col>
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/4.jpg" />
          </el-col>
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/3.jpg" />
          </el-col>
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/2.jpg" />
          </el-col>
          <el-col :span="6">
            <img src="../../assets/librarian/image/banner/1.jpg" />
          </el-col>
        </el-col>
      </el-row>
    </el-row>
    <el-row>
      <!-- 导航2 -->
      <el-menu class="header-navbar2" mode="horizontal" active-text-color="#ffd04b" text-color="#000" :router="true">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span>书籍管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="all_book">全部书籍管理</el-menu-item>
            <el-menu-item index="1-2">未归还书籍管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="reader">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>reader账户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">初始化reader账户</el-menu-item>
            <el-menu-item index="reader_manage">管理reader账户（编辑/删除）</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="affair">
          <template slot="title">
            <i class="el-icon-message-solid"></i>
            <span>未处理业务</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">读者受理借阅</el-menu-item>
            <el-menu-item index="affair_return">归还书籍</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-price-tag"></i>
            <span>图书馆收入</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">保证金收入</el-menu-item>
            <el-menu-item index="4-2">罚金收入</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="notice">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>公告管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="notice_history">历史公告</el-menu-item>
            <el-menu-item index="5-2">发布公告</el-menu-item>
            <el-menu-item index="5-3">管理主页公告？？？</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-row>
    <!-- 主体部分 -->
    <el-main>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
    <!-- 页脚 -->
    <el-footer>

    </el-footer>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        // 被点击的菜单项
        activePath: '',
        // 获取的书本种类
        bookList: [],
        // 路由显示
        // isRouterAlive:true
      }
    },
    created() {
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods: {
      // 退出登录
      async logout() {
        // this.$http({
        //   url:'librarian/logout',
        //   methods:'POST',
        //   withCredentials: true
        // }).then(res =>{
        //   window.sessionStorage.clear();
        //   this.$router.push('/login')
        //   this.$message.success('退出成功')
        // }).catch(err =>{
        //   this.$message.error('Error occour')
        // })
        // 询问
        const confrimResult = await this.$confirm('Will you logout?',
          'Tip', {
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            type: 'warning'
          },
        ).catch(err => {
          return err
        })
        // 确认删除返回"comfrim"
        // 取消删除返回"cancel"
        if (confrimResult !== 'confirm') {
          return this.$message.info('cancel')
        }
        this.$router.push('/login')
        this.$message.success('logout success')

      },
      // 保持链接激活状态 并跳转
      saveNavState(activePath, id) {
        window.sessionStorage.setItem('activePath', activePath)
        this.activePath = activePath
        // this.$bus.$emit('change')
        // this.$router.go(0)
        // this.isRouterAlive = true
        // 跳转至新页面
        this.$router.push(
          // this.activePath
          {
            path: `/show${this.activePath}`,
          }
        )
      },
      // 返回首页
      backToIndex() {
        this.$router.push('/index')
      },


    }
  }
</script>

<style lang="less" scoped>

</style>
